<template>
<div class=''>
     <Header title="购物车"/>
     <CartItem v-for="(item, index) in cartItems" :key="index" :good=item>
    </CartItem>
</div>
</template>

<script>
import Header from "../components/Header.vue";
import CartItem from "../components/CartItem.vue";
import { onMounted } from '@vue/runtime-core';
import { getCartItems } from "../api/cart";
import { reactive } from "@vue/reactivity";

export default {
    components:{
        Header,
        CartItem
    },

    //下来加载更多组件, 参考more里面的
   setup(props, context) {
       const cartItems = reactive([])
       onMounted(()=>{
           getCartItems().then((res)=>{
               console.log("cart item list", res)
               cartItems.splice(0, cartItems.length)
               cartItems.push(...res.result.list)
           })
       })
      return {
           cartItems
      };
   },
}
</script>
<style  scoped>

</style>